import { toTree } from '@/utils';
import { Row } from 'antd';
import { useCallback, useContext, useEffect, useState } from 'react';
import { IAuthOtherSteps } from '../../type';
import { AuthorizationContext, useJurisAndOperaReq } from '../AuthHooks';
import { AuthThreeLeftTree } from './AuthThreeLeftTree';
import { AuthThreeRightCard } from './AuthThreeRightCard';

export const AuthThreeSteps: React.FC<IAuthOtherSteps> = ({ leftTreeData }) => {
  const {
    prefixCls,
    roleAuthDetailInfo, 
    threeSaveIdList,
  } = useContext(AuthorizationContext); //获取 上下文
  const { onMenuSelectChange, jurisTableData } = useJurisAndOperaReq();

  const [saveThreeIds, setSaveThreeIds] = useState<any>(null);
  const setSaveSenond = useCallback(
    (idList: any) => {
      setSaveThreeIds(idList);
    },
    [saveThreeIds],
  );

  useEffect(() => {
    let defaultIDS: any = [];
    if (roleAuthDetailInfo?.id && roleAuthDetailInfo?.paramObject) {
      roleAuthDetailInfo?.paramObject?.handle?.map((item: any) => {
        defaultIDS?.push(item?.id);
      });
    }
    if (threeSaveIdList) {
      setSaveSenond(threeSaveIdList);
    } else {
      setSaveSenond(defaultIDS);
    }
  }, [roleAuthDetailInfo?.id]);

  return (
    <>
      <Row
        style={{ height: '100%', overflow: 'hidden' }}
        className={prefixCls + 'step-cardRole'}
      >
        <AuthThreeLeftTree
          secondLeftTree={toTree(leftTreeData)}
          onMenuSelectChange={onMenuSelectChange}
        />

        <AuthThreeRightCard
          leftDataTree={leftTreeData}
          secondRightData={jurisTableData}
          defaultSecIDList={saveThreeIds}
        />
      </Row>
    </>
  );
};
